<template>
  <div class="dataBorad">
    <initBoard :title="title">
      <!-- 左边 -->
      <template slot="left">
        <tcbSlot>
          <div slot="tcbTop" class="flex-center wh100">
            <span class="iconfont icon-a-ziyuan13 color-shallowBlue font96 mr20"></span>
            <div>
              <div class="color-shallowBlue font48">{{ topDataList[0].value }}</div>
              <span class="font24">{{ topDataList[0].name }}{{ topDataList[0].unit ? '（'+ topDataList[0].unit +'）' : '' }}</span>
            </div>
          </div>
          <div slot="tcbCenter" class="wh100 flexColumn">
            <div class="titleWrap">月出货情况</div>
            <div class="flex1">
              <barCharts :id="'barCharts1'"></barCharts>
            </div>
          </div>
          <div slot="tcbBottom" class="wh100">
            <div class="titleWrap">毛利润</div>
            <div class="profitList">
              <div class="flex title">
                <span style="width: 40%">货号</span>
                <span style="width: 30%">销售量</span>
                <span style="width: 30%">毛利润 (万)</span>
              </div>
              <div class="listBox">
                <div class="flex" v-for="(i, index) in profitList" :key="'profitList' + index">
                  <span style="width: 40%">{{ i.name }}</span>
                  <span style="width: 30%">{{ i.saleNum }}</span>
                  <span style="width: 30%">{{ i.profit }}</span>
                </div>
              </div>
            </div>
          </div>
        </tcbSlot>
      </template>
      <!-- 中间 -->
      <template slot="center">
        <tcbSlot>
          <div slot="tcbTop" class="flex-center wh100">
            <span class="iconfont icon-a-ziyuan5 color-shallowRed font96 mr20"></span>
            <div>
              <div class="color-shallowRed font48">{{ topDataList[1].value }}</div>
              <span class="font24">{{ topDataList[1].name }}{{ topDataList[1].unit ? '（'+ topDataList[1].unit +'）' : '' }}</span>
            </div>
          </div>
          <div slot="tcbCenter" class="flexColumn" style="height: 100%">
            <div class="titleWrap" style="width: 40%">客户订单量top10排行</div>
            <div class="flex1 flex orderListBox">
              <div v-for="(item, i) in orderList" :key="i + 'box'">
                <div class="flex headerBox">
                  <span>{{ i + 1}} {{ item.name }}</span>
                  <span>{{item.value}}{{item.unit}}</span>
                </div>
                <div class="progressBox">
                  <div class="progress" :style="{width: (item.value / widthMax * 100) + '%'}">
                    <div class="colorBox"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div slot="tcbBottom" class="flexColumn" style="height: 100%">
            <div style="height: 40px" class="flex">
              <div class="titleWrap" style="width: 40%">客户订单量top10排行</div>
              <div class="flex-center mt10 flex1" style="height: 40px">
                <div class="flex-center oerderDateListItem finger" @click="currentDate = index" v-for="(item, index) in oerderDateList" :key="index + 'oerderDateList'" :class="{'active': index === currentDate}">
                  {{item.name}}
                </div>
              </div>
            </div>
            <div class="flex1">
              <barCharts2 :id="'barCharts2'"></barCharts2>
            </div>
          </div>
        </tcbSlot>
      </template>
      <!-- 右边 -->
      <template slot="right">
        <tcbSlot>
          <div slot="tcbTop" class="flex-center wh100">
            <span class="iconfont icon-a-ziyuan7 color-yellow font96 mr20"></span>
            <div>
              <div class="color-yellow font48">{{ topDataList[2].value }}</div>
              <span class="font24">{{ topDataList[2].name }}{{ topDataList[2].unit ? '（'+ topDataList[2].unit +'）' : '' }}</span>
            </div>
          </div>
          <div slot="tcbCenter" class="wh100 flexColumn">
            <div class="titleWrap">产品品类销售分布</div>
            <div class="flex1">
              <barCharts3 :id="'barCharts3'"></barCharts3>
            </div>
          </div>
          <div slot="tcbBottom" class="wh100 flexColumn">
            <div class="titleWrap">产品品类销售趋势</div>
            <div class="flex1">
              <lineCharts :id="'lineCharts1'"></lineCharts>
            </div>
          </div>
        </tcbSlot>
      </template>
    </initBoard>
  </div>
</template>

<script>
import initBoard from '@/components/_initBoard/initBoard'
import tcbSlot from './tcbSlot.vue'
import barCharts from './charts/barCharts.vue'
import barCharts2 from './charts/barCharts2.vue'
import barCharts3 from './charts/barCharts3.vue'
import lineCharts from './charts/lineCharts.vue'
export default {
  name: 'dataBorad',
  components: {
    initBoard,
    tcbSlot,
    barCharts,
    barCharts2,
    barCharts3,
    lineCharts
  },
  data () {
    return {
      title: '客户大数据看板',
      topDataList: [
        {name: '今日成交额', value: 95000, unit: '元'},
        {name: '累计成交额', value: 5000, unit: ''},
        {name: '累计订单数量', value: 90000, unit: '单'}
      ],
      profitList: [
        {name: '主机板', saleNum: 200000, profit: 200},
        {name: '矿机', saleNum: 8000, profit: 2000},
        {name: '工控板', saleNum: 20000, profit: 12},
        {name: '电视机顶盒', saleNum: 800000, profit: 1500},
        {name: '主机板', saleNum: 200000, profit: 200},
        {name: '矿机', saleNum: 8000, profit: 2000},
        {name: '工控板', saleNum: 20000, profit: 12},
        {name: '电视机顶盒', saleNum: 800000, profit: 1500}
      ],
      orderList: [
        {name: '技嘉', value: 10000, unit: '个'},
        {name: '技嘉', value: 10000, unit: '个'},
        {name: 'xxx', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'},
        {name: '技嘉', value: 1000, unit: '个'}
      ],
      oerderDateList: [
        {name: '今年'},
        {name: '今日'},
        {name: '昨日'},
        {name: '近七日'}
      ],
      currentDate: 0
    }
  },
  computed: {
    widthMax () {
      let max = 0
      this.orderList.forEach(item => {
        if (item.value > max) {
          max = item.value
        }
      })
      return max + (max / 6)
    }
  },
  mounted () {
  }
}
</script>

<style lang='less'>
.dataBorad{
  width: 100%;
  height: 100%;
  color: white;
  .profitList{
    height: calc(100% - 50px);
    .title, .listBox div{
      height: 40px;
      width: 100%;
      line-height: 40px;
      border-bottom: 1px solid #0051a3a8;
      span{
        height: 40px;
        font-size: 16px;
        color: #66a5e2;
      }
    }
    .listBox{
      height: 240px;
      overflow: auto;
    }
  }
  .orderListBox{
    flex-wrap: wrap;
    margin-bottom: 10px;
    &>div{
      height: 20%;
      width: 50%;
      padding: 8px;
      box-sizing: border-box;
      .headerBox{
        height: 50%;
        justify-content: space-between;
        font-size: 16px;
        margin-bottom: 5px;
      }
      .progressBox{
        height: 40%;
        border-radius: 20px;
        background-color: #0c2f73;
        .progress{
          height: 100%;
          border-radius: 20px;
          .colorBox{
            height: 100%;
            border-radius: 20px;
            background-color: #30ccfc;
            animation: progressWidth 0.5s linear;
          }
          @keyframes progressWidth {
            0%{
              width: 0%;
            }
            100%{
              width: 100%;
            }
          }
        }
      }
    }
  }
  .oerderDateListItem{
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    border: 2px solid #2776d8;
    color: #2776d8;
    background-color: #1949a8;
    margin: 0 10px;
  }
  .active{
    color: white;
    border: unset;
    background-color: #3090f3;
  }
}
</style>